<!-- 弹窗选择组件 -->
<script lang="ts" setup>
import { reactive } from 'vue'
import type { PropType } from 'vue'
import type { IMyPick, IMySearch, IMyTableColumn } from '@/types/global'
import PickBox from './comps/PickBox.vue'

const emits = defineEmits(['search', 'pick'])

const props = defineProps({
  title: {
    type: String,
    default: '标题'
  },
  multiple: {
    type: Boolean,
    default: true
  },
  // 默认选中的数据
  defaultList: {
    type: Array as PropType<IMyPick[]>,
    default() {
      return []
    }
  },
  // 搜索条件
  search: {
    type: Object as PropType<IMySearch>,
    default() {
      return {} as IMySearch
    }
  },
  // 表格数据
  data: {
    type: Array as PropType<any[]>,
    default() {
      return [] as any[]
    }
  },
  // 表头
  columns: {
    type: Array as PropType<IMyTableColumn[]>,
    default() {
      return [] as IMyTableColumn[]
    }
  },
  // 数据总数
  total: {
    type: Number,
    default: 0
  },
  // 搜索栏高度
  searchHeight: {
    type: Number,
    default: 40
  },
  /**
   * 其他el-dialog的属性
   */
  options: {
    type: Object,
    default() {
      return {}
    }
  }
})
// 弹窗数据
const dialogData = reactive({
  show: false,
  pickList: [] as any[] // 当前选中的数据
})

/**
 * 打开弹窗
 */
function showClick() {
  // 初始化选中的数据
  dialogData.pickList = JSON.parse(JSON.stringify(props.defaultList || []))
  dialogData.show = true
}
/**
 * 请求数据
 */
function getDataList() {
  emits('search')
}
/**
 * 点击确定
 */
function confirmClick() {
  emits('pick', dialogData.pickList)
  dialogData.show = false
}
</script>

<template>
  <div class="db-picker-user" @click="showClick">
    <slot>选择</slot>
    <dui-dialog v-model="dialogData.show" :title="title" v-bind="options">
      <div class="dui-picker-body">
        <!-- 左侧表格 -->
        <div class="dui-picker-box">
          <!-- 搜索栏 -->
          <div :style="`height:${searchHeight}px`" v-if="$slots['search']">
            <slot name="search"></slot>
          </div>
          <!-- 表格 -->
          <dui-table
            :style="`height:calc(100% - ${$slots['search'] ? searchHeight : 0}px)`"
            :search="search"
            :data="data"
            :total="total"
            :columns="columns"
            :pick-list="dialogData.pickList"
            @search="getDataList"
          />
        </div>

        <!-- 右侧选中列表 -->
        <PickBox class="dui-picker-box" :pick-list="dialogData.pickList" />
      </div>
      <template #footer>
        <el-button @click="dialogData.show = false">取消</el-button>
        <el-button type="primary" @click="confirmClick"> 确定 </el-button>
      </template>
    </dui-dialog>
  </div>
</template>

<style lang="scss">
.dui-picker-body {
  height: 70vh;
  width: 100%;
  box-sizing: border-box;
  display: grid;
  column-gap: 10px;
  grid-template-columns: 1fr 250px;

  .dui-picker-box {
    box-sizing: border-box;
    overflow: hidden;
    border-radius: 4px;
  }
}
</style>
